<template>
    <div>
        <el-card class="box-card">
        <div slot="header" class="clearfix">
            <h3>业主信息</h3>
        </div>

        <el-descriptions class="margin-top" title="" :column="3" size="" border>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-user"></i>
                业主名字
            </template>
            {{ ownerinfo.name }}
            </el-descriptions-item>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-mobile-phone"></i>
                业主昵称
            </template>
            {{ ownerinfo.nickName }}
            </el-descriptions-item>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-location-outline"></i>
                联系电话：
            </template>
            {{ ownerinfo.phone }}
            </el-descriptions-item>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-tickets"></i>
                身份证号码：
            </template>
            {{ ownerinfo.idCard }}
            </el-descriptions-item>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-tickets"></i>
                性别
            </template>
            <el-tag effect="dark" type="success">{{ ownerinfo.gender == 1?"男":"女" }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-location-outline"></i>
                身份证信息是否完善：
            </template>
            <el-tag effect="dark" :type="ownerinfo.isRefine == 1?'success':'danger'">{{ ownerinfo.isRefine == 1?"已完善":"未完善" }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-location-outline"></i>
                签名：
            </template>
            {{ ownerinfo.sign }}
            </el-descriptions-item>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-office-building"></i>
                账号状态：
            </template>
            <el-tag effect="dark" :type="ownerinfo.status == 1?'success':'danger'">{{ ownerinfo.status == 1?"正常":"停用" }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-location-outline"></i>
                头像：
            </template>
            <el-avatar shape="square" style="width: 100px;height: 100px;" :src=" ownerinfo.face!=null?ownerinfo.face:'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png' "></el-avatar>
            </el-descriptions-item>
            <el-descriptions-item>
            <template slot="label">
                <i class="el-icon-location-outline"></i>
                账号创建时间：
            </template>
            {{ ownerinfo.createTime }}
            </el-descriptions-item>
        </el-descriptions>
        </el-card>

        <el-card class="box-card" style="margin-top: 20px;">
            <div slot="header" class="clearfix">
                <h3>业主房产</h3>
            </div>
            <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="编号">
            </el-table-column>
            <el-table-column
                prop="detail"
                label="详细">
            </el-table-column>
            <el-table-column
                prop="type"
                label="房产类型">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.tagColor">{{ scope.row.propertyType }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="area"
                label="建筑面积(㎡)">
            </el-table-column>
            <el-table-column
                label="身份类型">
                <template>
                    <el-tag style="background-color: #edd9cd;color: #daa595; border: none;">户主</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                label="状态">
                <template>
                    <el-tag type="success">绑定中</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" @click="Unbinding(scope.row.id)">解绑</el-button>
                </template>
            </el-table-column>
            </el-table>
        </el-card>

        <el-card class="box-card" style="margin-top: 20px;">
            <div slot="header" class="clearfix">
                <h3>绑定车辆</h3>
            </div>
            <el-table
            :data="vihecleData"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="编号">
            </el-table-column>
            <el-table-column
                prop="licensePlateNumber"
                label="车牌号码">
            </el-table-column>
            <el-table-column
                prop="propertyVehicleBinding"
                label="绑定房产">
            </el-table-column>
            <el-table-column
                prop="vehicleCategory"
                label="车辆类型">
                <template slot-scope="scope">
                    {{ scope.row.vehicleCategory == 1?"七座及以下小客车/小型货车":"七座以上客车/中大型货车"  }}
                </template>
            </el-table-column>
            <el-table-column
                prop="isBinding"
                label="绑定状态">
                <template slot-scope="scope">
                <el-tag :type="scope.row.isBinding == 1?'success':'danger'"> {{ scope.row.isBinding == 1?"绑定中":"未绑定"  }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="syncStatus"
                label="同步状态">
                <template slot-scope="scope">
                <el-tag :type="scope.row.syncStatus == 1?'success':'danger'"> {{ scope.row.syncStatus == 1?"已同步":"未同步"  }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" @click="unbindingVehicle(scope.row.id)">解绑</el-button>
                </template>
            </el-table-column>
            </el-table>
        </el-card>

        <el-card class="box-card" style="margin-top: 20px;">
            <div slot="header" class="clearfix">
                <h3>绑定宠物</h3>
            </div>
            <el-table
            :data="petData"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="编号">
            </el-table-column>
            <el-table-column
                prop="name"
                label="宠物名">
            </el-table-column>
            <el-table-column
                prop="petType"
                label="宠物类型">
            </el-table-column>
            <el-table-column
                prop="gender"
                label="雌雄">
                <template slot-scope="scope">
                    <el-tag type="">{{ scope.row.gender == 1?"雄":"雌" }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="variety"
                label="品种">
            </el-table-column>
            <el-table-column
                prop="color"
                label="毛色">
            </el-table-column>
            <el-table-column
                prop="isCheckIn"
                label="宠物登记">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.isCheckIn == 1?'success':'info'">{{ scope.row.isCheckIn == 1?"已登记":"未登记" }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="isLogOut"
                label="是否注销">
                <template slot-scope="scope">
                <el-tag :type="scope.row.isLogOut == 1?'success':'info'">{{ scope.row.isLogOut == 1?"已注销":"未注销" }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" @click="unbindingPet(scope.row.id)">解绑</el-button>
                </template>
            </el-table-column>
            </el-table>
        </el-card>


    </div>

</template>

<script>

export default {
    name:'ownerInfo',
    data(){
        return{
            tableData: [],
            vihecleData:[],
            ownerinfo:{},
            petData:[],
        }
    },
    methods:{
        init(){
            let ownerId = localStorage.getItem("owner")
            this.$request.get("/owner/ownerInfo",{
                params:{
                    ownerId: ownerId
                }
            }).then(res=>{
                // console.log(res)
                this.ownerinfo = res.data.owner
                this.tableData = res.data.propertyList
                this.vihecleData = res.data.vehicleList
                this.petData = res.data.petList
            }).catch(err=>{
                console.log(err)
            })
        },
        Unbinding(id){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.$request.put("/owner/unbinding",id)
                .then(res=>{
                    this.init()
                }).catch(err=>{
                    console.log(err)
                })    
            this.$message({
                type: 'success',
                message: '解绑成功!'
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '操作取消'
            });          
            });

        },
        unbindingVehicle(id){
            console.log(id)
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.$request.put("/vehicle/unbinding",id)
                .then(res=>{
                    this.init()
                }).catch(err=>{
                    console.log(err)
                })    
            this.$message({
                type: 'success',
                message: '解绑成功!'
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '操作取消'
            });          
            });
        },

        unbindingPet(id){
            console.log(id)
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                this.$request.put("/pet/unbinding",id)
                .then(res=>{
                    this.init()
                }).catch(err=>{
                    console.log(err)
                })    
            this.$message({
                type: 'success',
                message: '解绑成功!'
            });
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '操作取消'
            });          
            });
        },
        tuichu(){
            this.$router.push({name:'owner'})
        }
    },
    created(){this.init()},
    mounted() {
        // console.log(this.$route.query.owner)
        // this.ownerinfo = this.$route.query.owner.data
    },
    activated(){
        this.init()
    }
}
</script>

<style>
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
   .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  /* .box-card {
    width: 480px;
  } */
</style>